<template>
  <div class="home-page">
    <!-- 欢迎区域 -->
    <el-card class="welcome-card">
      <div class="welcome-content">
        <div class="welcome-text">
          <h1>欢迎使用订单管理系统</h1>
          <p>基于读写分离架构的高性能订单管理平台</p>
        </div>
        <div class="welcome-actions">
          <el-button
            type="primary"
            size="large"
            @click="$router.push('/orders')"
          >
            进入订单管理
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon order-icon">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ stats.totalOrders }}</div>
              <div class="stats-label">总订单数</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon pending-icon">
              <el-icon><Clock /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ stats.pendingOrders }}</div>
              <div class="stats-label">待处理订单</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon revenue-icon">
              <el-icon><Money /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-number">
                ¥{{ stats.totalRevenue.toLocaleString() }}
              </div>
              <div class="stats-label">总收入</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <div class="stats-icon success-icon">
              <el-icon><Check /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-number">{{ stats.successRate }}%</div>
              <div class="stats-label">成功率</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作 -->
    <el-row :gutter="20" class="quick-actions-row">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
            </div>
          </template>
          <div class="quick-actions">
            <el-button
              type="primary"
              size="large"
              class="action-btn"
              @click="handleRefund"
            >
              <el-icon><Money /></el-icon>
              退款申请
            </el-button>

            <el-button
              type="success"
              size="large"
              class="action-btn"
              @click="handleMedicine"
            >
              <el-icon><FirstAidKit /></el-icon>
              药品订单
            </el-button>

            <el-button
              type="warning"
              size="large"
              class="action-btn"
              @click="handlePrescription"
            >
              <el-icon><Document /></el-icon>
              处方订单
            </el-button>

            <el-button
              type="info"
              size="large"
              class="action-btn"
              @click="handleConsultation"
            >
              <el-icon><ChatDotRound /></el-icon>
              问诊单
            </el-button>

            <el-button
              type="danger"
              size="large"
              class="action-btn"
              @click="handleRegistration"
            >
              <el-icon><Calendar /></el-icon>
              挂号单
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 系统架构信息 -->
    <el-row :gutter="20" class="info-row">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>系统架构信息</span>
            </div>
          </template>
          <el-descriptions :column="3" border>
            <el-descriptions-item label="架构模式"
              >读写分离</el-descriptions-item
            >
            <el-descriptions-item label="读操作API"
              >DU读 - {{ envInfo.readUrl }}</el-descriptions-item
            >
            <el-descriptions-item label="写操作API"
              >XIE写 - {{ envInfo.writeUrl }}</el-descriptions-item
            >
            <el-descriptions-item label="运行环境">{{
              envInfo.isDev ? "开发环境" : "生产环境"
            }}</el-descriptions-item>
            <el-descriptions-item label="前端框架"
              >Vue 3 + TypeScript</el-descriptions-item
            >
            <el-descriptions-item label="UI组件库"
              >Element Plus</el-descriptions-item
            >
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>

    <!-- API信息对话框 -->
    <el-dialog v-model="showApiDialog" title="API监控信息" width="600px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="总请求数">{{
          apiStats.total
        }}</el-descriptions-item>
        <el-descriptions-item label="读请求数">{{
          apiStats.readCount
        }}</el-descriptions-item>
        <el-descriptions-item label="写请求数">{{
          apiStats.writeCount
        }}</el-descriptions-item>
        <el-descriptions-item label="成功率"
          >{{ apiStats.successRate }}%</el-descriptions-item
        >
        <el-descriptions-item label="平均响应时间"
          >{{ apiStats.avgDuration }}ms</el-descriptions-item
        >
        <el-descriptions-item label="失败请求数">{{
          apiStats.failCount
        }}</el-descriptions-item>
      </el-descriptions>

      <template #footer>
        <el-button @click="showApiDialog = false">关闭</el-button>
        <el-button type="primary" @click="exportApiLogs">导出日志</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import {
  Document,
  Clock,
  Money,
  Check,
  Refresh,
  InfoFilled,
  FirstAidKit,
  ChatDotRound,
  Calendar,
} from "@element-plus/icons-vue";

// 响应式数据
const router = useRouter();
const showApiDialog = ref(false);
const stats = ref({
  totalOrders: 1250,
  pendingOrders: 45,
  totalRevenue: 1250000,
  successRate: 98.5,
});

// 计算属性
const envInfo = computed(() => ({
  readUrl: "http://localhost:5193",
  writeUrl: "http://localhost:5142",
  isDev: true,
}));

const apiStats = computed(() => ({
  total: 0,
  readCount: 0,
  writeCount: 0,
  successRate: "0.00",
  avgDuration: "0.00",
  failCount: 0,
}));

// 方法
const refreshStats = () => {
  // 模拟刷新统计数据
  stats.value = {
    totalOrders: Math.floor(Math.random() * 2000) + 1000,
    pendingOrders: Math.floor(Math.random() * 100) + 20,
    totalRevenue: Math.floor(Math.random() * 2000000) + 1000000,
    successRate: parseFloat((Math.random() * 5 + 95).toFixed(1)),
  };
};

const showApiInfo = () => {
  showApiDialog.value = true;
};

const exportApiLogs = () => {
  ElMessage.info("API监控功能已移除");
};

// 快捷操作方法
const handleRefund = () => {
  router.push("/refund");
};

const handleMedicine = () => {
  router.push("/medicine");
};

const handlePrescription = () => {
  router.push("/prescription");
};

const handleConsultation = () => {
  router.push("/consultation");
};

const handleRegistration = () => {
  router.push("/registration");
};

// 生命周期
onMounted(() => {
  // 初始化统计数据
  refreshStats();
});
</script>

<style scoped>
.home-page {
  padding: 0;
}

.welcome-card {
  margin-bottom: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

.welcome-text h1 {
  margin: 0 0 10px 0;
  font-size: 28px;
  color: white;
}

.welcome-text p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.welcome-actions {
  display: flex;
  gap: 15px;
}

.stats-row {
  margin-bottom: 20px;
}

.stats-card {
  height: 120px;
}

.stats-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.stats-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
  color: white;
}

.order-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.pending-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.revenue-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.success-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stats-info {
  flex: 1;
}

.stats-number {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.stats-label {
  font-size: 14px;
  color: #909399;
}

.info-row {
  margin-bottom: 20px;
}

.quick-actions-row {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quick-actions {
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.action-btn {
  height: 60px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.action-btn .el-icon {
  font-size: 20px;
}
</style> 